<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery隐藏和显示的应用</title>
        <script src="js/jquery-3.6.1.js"></script>
    </head>
    <body>
        <h3>jQuery隐藏和显示的应用(默认效果)</h3>
        <button id="hide01" type="button">隐藏</button>
        <button id="show01" type="button">显示</button>
        <p id="test01">测试段落01</p>
        <hr>
        <h3>jQuery隐藏和显示的应用(规定时长)</h3>
        <button id="hide02" type="button">隐藏</button>
        <button id="show02" type="button">显示</button>
        <p id="test02">测试段落02</p>
        <script>
            $(document).ready(function() {
                $("#hide01").click(function() {
                    $("p#test01").hide();
                });

                $("#show01").click(function() {
                    $("p#test01").show();
                });

                $("#hide02").click(function() {
                    $("p#test02").hide(3000);
                });

                $("#show02").click(function() {
                    $("p#test02").show(3000);
                });
            });
        </script>
    </body>
</html>